<template>
  <div class="operation" :style="{ top: toolbarPosition.top + 'px', left: toolbarPosition.left + 'px' }">
    <a @click="addBrotherItem(index, item)" v-if="item.projectId !== 0" title="同级 +">
      <el-icon>
        <ArrowRightBold />
      </el-icon>
    </a>
    <span v-if="item.projectId !== 0">|</span>
    <a @click="addChildItem(index, item)" title="子级 + ">
      <el-icon>
        <ArrowDownBold />
      </el-icon>
    </a>
    <span>|</span>
    <a @click="testIntem(index, item)" title="编辑">
      <el-icon>
        <EditPen />
      </el-icon>
    </a>
    <span>|</span>
    <a @click="deleteItem(index, item)" title="删除">
      <el-icon>
        <DeleteFilled />
      </el-icon>
    </a>
    <span v-if="item.children && item.children.length">|</span>
    <a v-if="item.children && item.children.length" @click="expandCollapse(index, item)" title="收起/展开">
      <el-icon v-if="item.expanded">
        <CaretTop />
      </el-icon>
      <el-icon v-else>
        <CaretBottom />
      </el-icon>
    </a>
    <span>|</span>
    <el-popover placement="bottom" :width="240" trigger="hover">
      <template #reference>
        <div class="item-btn">
          <a title="更多"><el-icon>
              <Clock />
            </el-icon></a>
        </div>
      </template>
      <div class="item-info">
        <p>开始时间: {{ formatDateTime(item.nodeStartTime) }}</p>
        <p>结束时间: {{ formatDateTime(item.nodeEndTime) }}</p>
      </div>
    </el-popover>
  </div>
</template>

<script>
export default {
  props: {
    index: Number,
    item: Object,
    addBrotherItem: Function,
    addChildItem: Function,
    testIntem: Function,
    deleteItem: Function,
    expandCollapse: Function,
    formatDateTime: Function
  },
  data() {
    return {
      toolbarPosition: { top: 0, left: 0 }
    };
  },
  mounted() {
    this.calculatePosition();
  },
  methods: {
    calculatePosition() {
      const inputElement = this.$parent.$refs.editInputs[this.index];
      if (inputElement) {
        const rect = inputElement.getBoundingClientRect();
        this.toolbarPosition.top = rect.top - 40; // 根据需要调整偏移量
        this.toolbarPosition.left = rect.left;
      }
    }
  }
}
</script>

<style scoped>
/* 添加样式以确保工具栏正确显示 */
</style>